<style>
  .message {
    padding: 0;
  }

  .message .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    font-weight: 400;
    color: #111111;
    padding: 12px 15px;
    padding-bottom: 11px;
    padding-right: 12px;
    border-bottom: 1px solid #eee;
    background-color: #f7f8f9;
  }

  .message .top #msg-number {
    display: inline-block;
    color: #FF3535;
  }

  .message .btn {
    margin-bottom: 0;
    margin-left: 6px;
    padding-left: 0;
    padding-right: 0;
  }

  #delete-all {
    width: 58px;
  }

  #read-all {
    margin-left: 20px;
    width: 88px;
    box-sizing: border-box;
    text-align: center;
  }

  #refresh-all {
    width: 74px;
  }

  .layui-icon-refresh {
    font-size: 12px;
    font-weight: bold;
  }

  /* 表格 */
  .table-part {
    margin-top: 0;
    margin-left: 14px;
    margin-right: 14px;
  }

  .layui-table-box {
    height: 100%;
  }

  .layui-table-body {
    height: 100% !important;
  }

  .message .layui-table tbody tr:hover {
    background: #F7F8F9;
  }

  .message .message-cell {
    margin: 10px 0 6px 0;
    font-size: 14px;
    color: #888888;
    line-height: 1;
  }

  .message .message-cell.unread {
    position: relative;
  }

  .message .message-cell.unread::before {
    position: absolute;
    left: -15px;
    top: 4px;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #FF3535;
  }

  .message .message-cell .base-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .message .message-cell .base-info .user-info .item {
    margin-right: 30px;
  }

  .message .message-cell .base-info .detail-btn {
    cursor: default;
    color: #4B6EEF;
  }

  .message .content {
    margin-top: 14px;
    color: #111111;
    line-height: 22px;
    word-wrap: break-word;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .message .layui-table-view {
    border: none;
    margin-bottom: 0;
    margin-bottom: 16px;
  }

  .message .layui-table-cell {
    height: auto;
    width: auto;
  }

  .layui-anim-rotate {
    -webkit-animation-name: layui-rotate;
    animation-name: layui-rotate;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  @-webkit-keyframes layui-rotate {
    from {
      -webkit-transform: rotate(0)
    }

    to {
      -webkit-transform: rotate(360deg)
    }
  }

  @keyframes layui-rotate {
    from {
      transform: rotate(0)
    }

    to {
      transform: rotate(360deg)
    }
  }
</style>
<div class="message">
  <div class="top">
    <div>
      <span id="msg-number">0</span>条未读
      <button type="button" class="layui-btn btn" id="read-all">全部已读</button>
      <button type="button" class="layui-btn btn btn-gray" id="delete-all">清空</button>
    </div>
    <button type="button" class="layui-btn btn btn-gray" id="refresh-all">
      <i class="layui-icon layui-icon-refresh layui-anim"></i> 刷新
    </button>
  </div>
  <table class="layui-hide" id="message-table" lay-filter="table"></table>
  <div style="display:flex;align-items:center;justify-content: flex-end;">
    <span class="count-part">
      共<span id="count">0</span>条
    </span>
    <div id="pager">
      <span class="text">10条/页</span>
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </div>
    <div class="virtual-page" id="virtual-pagebar"></div>
  </div>
</div>
<script src="res/js/html2Text.js"></script>
<script>
  layui.use(function () {
    let $ = layui.$
    let laytpl = layui.laytpl
    let table = layui.table
    var laypage = layui.laypage // 自定义页脚

    // 表格
    let dataArr = null
    let count = 0 // 数据总量
    let pageSize = 10
    let pageNum = 1


    var dropdown = layui.dropdown
    dropdown.render({
      elem: '#pager', //可绑定在任意元素中，此处以上述按钮为例
      data: [{
        title: '10条/页',
        id: 10
      }, {
        title: '20条/页',
        id: 20
      }, {
        title: '30条/页',
        id: 30
      }, {
        title: '40条/页',
        id: 40
      }, {
        title: '50条/页',
        id: 50
      }],
      id: 'pager',
      //菜单被点击的事件
      click: function (obj) {
        $('#pager .text').text(obj.id + '条/页')
        initPage(obj.id)
        getIndexData() // 初始化的页脚不请求，手动请求
      }
    })

    // 分页、表格渲染 
    initPage()
    table.render({
      elem: '#message-table',
      data: dataArr,
      height: 'full-160',
      skin: 'line',
      id: 'message-table',
      className: 'table-part',
      scrollPos: 'fixed',
      text: {
        none: '暂无相关数据' //默认：无数据。
      },
      cols: [[
        { field: 'id', title: 'ID', templet: '#table-Tpl' }
      ]],
      done: function () {
        $(this.elem).next().find(".layui-table-header").attr('class', "layui-hide layui-table-header")
      }
    });



    // 监听返回数据
    window.addEventListener("setItemEvent", function (e) {
      switch (e.key) {
        case 'MainwtMessageRes': // 消息list
          compareStorage(e.key, e.newValue)
          break
        case 'refresh': // 刷新
          getIndexData()
          break
      }
    })

    // 准备渲染 消息list
    function compareStorage (cmdName, newValue) {
      var _this = sessionStorage.getItem(cmdName)
      let res = newValue ? JSON.parse(newValue) : {}
      count = res.TotalCount
      $('#msg-number').text(res.NoReadCount)
      setPageData(newValue)
    }

    // 设置页面 渲染内容
    function setPageData (newValue) {
      let resData = newValue ? JSON.parse(newValue) : {}
      dataArr = resData.MessageList || []

      for (let i = 0; i < dataArr.length; i++) {
        let item = dataArr[i]
        item.Content = Html2Text(item.Content)
      }
      // 触发渲染
      tableReloadData()
      // 排除 分页组件触发的
      if (resData.PageNum === '1' && resData.OnePageCount === '10') {
        initPage()
      }
    }

    // 按钮 全部已读
    $('#read-all').click(function () {
      let data = {
        cmd: 'MainwtMessageReadAll'
      }
      reqPageData(data)
      // TODO 无法知道请求是否成功，默认刷新
      setTimeout(() => {
        getIndexData()
      }, 100)
    })

    // 按钮 清空 所有消息
    $('#delete-all').click(function () {
      let data = {
        cmd: 'MainwtMessageDeleteAll'
      }
      reqPageData(data)
      setTimeout(() => {
        getIndexData()
      }, 100)
    })

    let refreshBtn = null
    // 按钮 刷新
    $('#refresh-all').click(function () {
      $(this).find('.layui-anim').addClass('layui-anim-rotate')
      clearTimeout(refreshBtn)
      refreshBtn = setTimeout(() => {
        getIndexData()
        $(this).find('.layui-anim').removeClass('layui-anim-rotate')
      }, 300)
    })

    // 监听表格 点击事件 查看消息详情
    table.on('tool(table)', function (result) {
      let event = result.event
      let row = result.data
      if (event === "viewDetails") {
        let data = {
          cmd: 'MainwtMessageDetailReq',
          MessageID: row.MessageID
        }
        console.log(JSON.stringify(data))
        reqPageData(data)
        setTimeout(() => {
          getIndexData()
        }, 100)
      }
    })

    // 获取新数据 表格重载
    function tableReloadData () {
      table.reloadData('message-table', {
        data: dataArr
      })
    }


    function initPage (pagelimit) {
      //执行一个laypage实例
      $('#count').text(count)
      laypage.render({
        elem: 'virtual-pagebar',
        prev: '<i class="layui-icon layui-icon-left"></i>',
        next: '<i class="layui-icon layui-icon-right"></i>',
        layout: ['prev', 'page', 'next', 'skip'],
        theme: '#4c6eef',
        limit: pagelimit || 10,
        count: count, //数据总数，从服务端得到
        jump: function (obj, first) {
          pageSize = obj.limit
          pageNum = obj.curr
          //首次不执行
          if (!first) {
            // 获取新数据
            getIndexData()
          }
        }
      })
    }

    // 请求消息列表数据 
    function getIndexData () {
      let data = {
        cmd: 'MainwtMessageReq',
        OnePageCount: pageSize + '',
        PageNum: pageNum + ''
      }
      reqPageData(data)
    }
    getIndexData()

  })
</script>
<!--表格模板 -->
<script id="table-Tpl" type="text/html">
  <div class="message-cell {{d.IsRead === '0' ? 'unread' : ''}}">
    <div class="base-info">
      <span class="user-info">
        <span class="item">{{d.SendTime}}</span>
        <span class="item">{{d.SendUser}}</span>
      </span>
      <span class="detail-btn" lay-event="viewDetails">查看详情</span>
    </div>
    <div class="content">
      {{d.Content}}
    </div>
  </div>
</script>